import React from 'react';
import { useParams} from "react-router-dom";

import './phone.css'

function Phone(props) {
    // 通过useParams方法返回的对象获取params方式传递的参数
    let params = useParams()
    console.log(params)
    const phoneList = [
        {
            id:1,
            name:'苹果',
            img : 'https://img0.baidu.com/it/u=2773220484,2599461233&fm=253&fmt=auto&app=138&f=PNG?w=752&h=500',
            content: '苹果，国务院批复确定的中国东部地区重要的中心城市、全国重要的科研教育基地和综合交通枢纽 [3]  。',
        },
        {
            id:2,
            name:'华为',
            img : 'https://img.pconline.com.cn/images/upload/upc/tx/pc_best/2103/07/c72/256091176_1615095961971.jpg',
            content: '华为，承东启西、连南接北，靠山抱湖、临江近海；西接六安市，北连淮南市，东靠滁州市、马鞍山市和芜湖市，西南邻安庆市、铜陵市；合肥属亚热带季风性湿润气候。',
        },
        {
            id:3,
            name:'小米',
            img : 'https://img2.baidu.com/it/u=2457617040,2248424361&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400',
            content: '小米，国务院批复确定的浙江省经济、文化、科教中心，长江三角洲中心城市之一 [1]  [122]  。截至2021年，全市下辖10个市辖区、2个县、代管1个县级市，总面积16850平方千米 [119]  ，常住人口1220.4万人，城镇人口1020.3万人，城镇化率83.6% [148]  。',
        }
    ]
    let phone = phoneList.find(item=>item.id===parseInt(params.id))
    return (
        <div className='phone'>
            <h2>{phone.name}</h2>
            <p>{phone.content}</p>
            <img src={phone.img} alt=""/>
        </div>
    );
}

export default Phone;
